<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<link rel="stylesheet/less" href="./css/style.less">
	<link rel="stylesheet" href="./css/animate.min.css">
	<title>Document</title>
</head>

<body>
	<div class="header">
		<div class="container">
			<div class="row">
				<nav class="navbar navbar-default" role="navigation">
					<div class="container-fluid ">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse"
								data-target="#example-navbar-collapse">
								<span class="sr-only">切换导航</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<a class="navbar-brand wow fadeInLeft" href="#">SPIRIT8</a>
						</div>
						<div class="collapse navbar-collapse" id="example-navbar-collapse">
							<ul class="nav navbar-nav navbar-right">
								<li class="active wow fadeInRight"><a href="#">HOME</a></li>
								<li><a href="#" class="wow fadeInRight">About</a></li>
								<li><a href="#" class="wow fadeInRight">SERVICES</a></li>
								<li><a href="#" class="wow fadeInRight">portfolio</a></li>
								<li><a href="#" class="wow fadeInRight">testimonials</a></li>
								<li><a href="#" class="wow fadeInRight">CONTACT</a></li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</div>
	</div>
	<!-- 第一页 -->
	<div class="bg">
		<!-- <h1>wELCOME on spirit8</h1> -->
		<div class="title wow fadeInRightBig" data-wow-delay='500ms'>
			<span>wELCOME on</span>
			<span>spirit8</span>
		</div>
		<p class="wow fadeInLeftBig" data-wow-delay='500ms'>We are a digital agency with <span>years of
				experience</span> and with <span>extraordinary people</span></p>
		<div class="head_down wow fadeInDown">↓</div>
	</div>
	<!-- 第二页 -->


	<div class="second_page">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-sm-0">
					<img src="./img/computer_03.png" class="img" alt="">
				</div>
				<div class="col-md-6 col-sm-12">
					<div class="text">
						<div class="about_us  wow fadeInDown">ABOUT US</div>
						<div class="second_page_head  wow fadeInDown"><span>SOME</span> WORDS <strong>ABOUT
								US</strong></div>
						<div class="second_text  wow fadeInDown">We love building and rebuilding brands through our
							specific skills. Using colour, fonts, and illustration, we brand companies in a way they
							will never forget.</div>
						<ul>
							<li class=" wow fadeInDown"><strong>Mission -</strong>We deliver uniqueness and quality
							</li>
							<li class=" wow fadeInDown">Skills - Delivering fast and excellent results</li>
							<li class=" wow fadeInDown">Clients - Satisfied clients thanks to our experience</li>

						</ul>
						<div class="second_btn  wow fadeInDown">
							<div class="glyphicon glyphicon-lock"></div>
							Browse our work
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 第三页 -->

	<div class="third_page">
		<div class="container">
			<div class="row">
				<div class="page_title wow fadeInDown">
					MEET <strong><span>OUR</span> TEAM</strong>
				</div>
				<div class="page_stick1"></div>
				<div class="page_stick2"></div>

				<div id="myCarousel" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators third_page_ol">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active">
							<!-- 人物介绍 -->
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3 wow fadeInDown"><span>Jason Statham</span> Knife designer</h3>
								<div class="people_font wow fadeInDown">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3 wow fadeInDown"><span>Jason Statham</span> Knife designer</h3>

								<div class="people_font wow fadeInDown">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3 wow fadeInDown"><span>Jason Statham</span> Knife designer</h3>

								<div class="people_font wow fadeInDown">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3 wow fadeInDown"><span>Jason Statham</span> Knife designer</h3>

								<div class="people_font wow fadeInDown">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
						</div>
						<div class="item">
							<!-- 人物介绍 -->
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3"><span>Jason Statham</span> Knife designer</h3>
								<div class="people_font">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3"><span>Jason Statham</span> Knife designer</h3>

								<div class="people_font">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3"><span>Jason Statham</span> Knife designer</h3>

								<div class="people_font">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3"><span>Jason Statham</span> Knife designer</h3>

								<div class="people_font">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
						</div>
						<div class="item">
							<!-- 人物介绍 -->
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3"><span>Jason Statham</span> Knife designer</h3>
								<div class="people_font">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3"><span>Jason Statham</span> Knife designer</h3>

								<div class="people_font">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3"><span>Jason Statham</span> Knife designer</h3>

								<div class="people_font">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
							<div class="col-md-3 col-sm-6 col-xs-6">
								<div class="people_head"></div>
								<h3 class="third_page_h3"><span>Jason Statham</span> Knife designer</h3>

								<div class="people_font">Do not seek to change what has come before. Seek to create that
									which
									has not.
								</div>
							</div>
						</div>
					</div>
				</div>



			</div>
		</div>
	</div>
	<div class="fourth_page">
		<div class="container">
			<div class="row">
				<div class="page_title page_title2 wow fadeInDown">
					take a look at <strong>our services</strong>
				</div>
				<div class="page_stick1"></div>
				<div class="page_stick2"></div>
				<p class="fourth_page_p wow fadeInDown">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
					Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
					theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
					dolor sit amet..", comes from a line in section 1.10.32.</p>
				<div class="col-md-3 col-sm-6 col-xs-6">
					<div class="fourth_thing"> <img class="fourth_img" src="./img/33-spirit8-digital-agency_03.png"
							alt=""></div>
					<div class="fourth_thing_title wow fadeInDown">Web design</div>
					<div class="fourth_thing_p wow fadeInDown">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
						from a line in section 1.10.32.</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6">
					<div class="fourth_thing"> <img class="fourth_img" src="./img/33-spirit8-digital-agency_05.png"
							alt=""></div>
					<div class="fourth_thing_title wow fadeInDown">Web design</div>
					<div class="fourth_thing_p wow fadeInDown">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
						from a line in section 1.10.32.</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6">
					<div class="fourth_thing"> <img class="fourth_img" src="./img/33-spirit8-digital-agency_07.png"
							alt=""></div>
					<div class="fourth_thing_title wow fadeInDown">Web design</div>
					<div class="fourth_thing_p wow fadeInDown">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
						from a line in section 1.10.32.</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6">
					<div class="fourth_thing"> <img class="fourth_img" src="./img/33-spirit8-digital-agency_09.png"
							alt=""></div>
					<div class="fourth_thing_title wow fadeInDown">Web design</div>
					<div class="fourth_thing_p wow fadeInDown">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
						from a line in section 1.10.32.</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 第五页 -->
	<div class="fifth_page">
		<div class="container">
			<div class="row">
				<div class="page_title wow fadeInDown">
					SOME OF <strong>OUR CLIENTS</strong>
				</div>
				<div class="page_stick1"></div>
				<div class="page_stick2"></div>
				<div class="fifth_logos wow fadeInDown">
					CHANEL ZARA GUERLAIN LANCOM LACOSTE
				</div>
			</div>
		</div>
	</div>
	</div>
	<!-- 第六页 -->
	<div class="sixth_page">
		<div class="container">
			<div class="row">
				<div class="page_title sixth_title wow fadeInDown">take a look at our work</div>
				<div class="page_stick1"></div>
				<div class="page_stick2"></div>
				<div class="sixth_font wow fadeInDown">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
					Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
					theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
					dolor sit amet..", comes from a line in section 1.10.32.</div>
				<div class="sixth_set">
					<div class="sixth_set_left wow fadeInDown">Filter by type</div>
					<div class="sixth_set_right wow fadeInDown"><span class="sixth_span">All</span> | Web design | Mobile design | Photograpy</div>
				</div>
				<!-- 第一行 -->
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tren_20.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h wow fadeInDown">Trend and fashion</div>
							<div class="sixth_hover_p wow fadeInDown">Website design</div>
							<div class="sixth_hover_add">+</div>

						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tren_20.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tren_20.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tren_20.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>
						</div>
					</div>
				</div>
				<!-- 第二行 -->
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tran2_24.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>

						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tran2_24.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tran2_24.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tran2_24.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>
						</div>
					</div>
				</div>
				<!-- 第三行 -->
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tran3_24.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>

						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tran3_24.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tran3_24.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
					<div class="sixth-box">
						<img src="./img/tran3_24.png" alt="" class="center-block">
						<div class="sixth_hover">
							<div class="sixth_hover_h">Trend and fashion</div>
							<div class="sixth_hover_p">Website design</div>
							<div class="sixth_hover_add">+</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 第七页 -->
	<div class="seventh_page">
		<div class="container">
			<div class="row">
				<div class="page_title wow fadeInDown">our clients’ testimonials</div>
				<div class="page_stick1"></div>
				<div class="page_stick2"></div>
				<div class="seventh_p1 wow fadeInDown">his book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
				<div class="seventh_p2 wow fadeInDown">DEAN Martin, CEO Acme Ino.</div>
			</div>
		</div>
	</div>
	<!-- 第八页 -->
	<div class="eighth_page">
		<div class="container">
			<div class="row">
				<div class="page_title eighth_title wow fadeInDown">feel free to contact us</div>
				<div class="page_stick1"></div>
				<div class="page_stick2"></div>
				<div class="eighth_p wow fadeInDown">
					Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. 
				</div>
				<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
					<div class="eighth_input wow fadeInDown">
						<div class="eighth_h">name <span>*</span></div>
						<input type="text" class="eighth_i">
					</div>
				</div>
				<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
					<div class="eighth_input wow fadeInDown">
						<div class="eighth_h">Email adress <span>*</span></div>
						<input type="text" class="eighth_i">
					</div>
					
				</div>
				<div class="col-sm-12">
					<div class="eighth_h eighth_h2 wow fadeInDown">Email adress <span>*</span></div>
					<textarea class="textarea wow fadeInDown"></textarea>
				</div>
				<div class="eighth_btn wow fadeInDown">Send</div>
			</div>
		</div>
	</div>
	<div class="last">
		<div class="container">
			<div class="row">
				<div class="footer">
					<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
						<div class="last_left">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
					</div>
					<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
						<div class="last_right">
							<img src="./img/footer_03.png" alt="">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="js/wow.min.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="js/less.js"></script>
<script src="./js/loop.js"></script>
<script>
	new WOW().init();
</script>

</html>